<template>
  <el-form
    :inline="true"
    :model="localForm"
    class="search-form bg-bg_color w-full pl-4 pt-2 pb-2 overflow-auto"
  >
    <el-form-item label="关键词" prop="keyword">
      <el-input
        v-model.trim="localForm.keyword"
        placeholder="组织名称 / 编号"
        clearable
        class="w-[220px]!"
      />
    </el-form-item>
    <el-form-item label="类型" prop="org_type">
      <el-select
        v-model="localForm.org_type"
        placeholder="全部类型"
        clearable
        class="w-[160px]!"
      >
        <el-option label="全部类型" value="" />
        <el-option
          v-for="item in ORG_TYPE_OPTIONS"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="状态" prop="status">
      <el-select
        v-model="localForm.status"
        placeholder="全部状态"
        clearable
        class="w-[140px]!"
      >
        <el-option label="全部状态" value="" />
        <el-option
          v-for="item in ORG_STATUS_OPTIONS"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="区域" prop="region_id">
      <el-tree-select
        v-model="localForm.region_id"
        :data="regions"
        placeholder="全部区域"
        clearable
        filterable
        check-strictly
        :render-after-expand="false"
        class="w-[220px]!"
        :props="treeProps"
      />
    </el-form-item>
    <slot />
    <el-form-item>
      <el-button
        type="primary"
        :icon="useRenderIcon('ri:search-line')"
        :loading="loading"
        @click="emitSearch"
      >
        搜索
      </el-button>
      <el-button :icon="useRenderIcon('ep:refresh')" @click="emitReset">
        重置
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { reactive, watch } from "vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { ORG_TYPE_OPTIONS, ORG_STATUS_OPTIONS } from "@/api/system/org/organization";

interface FilterForm {
  keyword: string;
  org_type: string | number;
  status: string | number;
  region_id: string | number;
  invited_by?: string | number;
}

const props = defineProps<{
  loading: boolean;
  filterForm: FilterForm;
  regions: any[];
}>();

const emit = defineEmits<{
  (e: "search"): void;
  (e: "reset"): void;
}>();

const treeProps = { label: "name", value: "id", children: "children" };
const localForm = reactive({ ...props.filterForm });

watch(
  () => props.filterForm,
  value => {
    Object.assign(localForm, value);
  },
  { deep: true }
);

const emitSearch = () => emit("search");
const emitReset = () => emit("reset");
</script>

<style scoped>
.search-form :deep(.el-form-item) {
  margin-bottom: 12px;
}
</style>
